import styled from "styled-components";

export const HeaderWrapped = styled.div`
  height:75px;
  background-color:#242424;
  
  .content{
    height:70px;
    
    display:flex;
    justify-content: space-between;
  }
  
  .divider{
    height:5px;
    background-color:#c20c0c;
  }
`

export const HeaderLeft  = styled.div`
  display:flex;
  .logo{
    display:block;
    width:176px;
    height:69px;
    background-position:0 0 ;
    text-indent:-999999px; //text节点定位
  }
  
  .select-list{
    display:flex;
    line-height:70px;
     .select-item {
       position:relative; // 这里开定位为了让小三角图标参考定位
        a {
          display:block;
          padding:0 20px;
          color:#ccc;
        }
       
       :last-of-type a{ // 最后一个a元素开启相对定位，为了给HOT图标参考定位
         position:relative;
         ::after{
           position:absolute;
           content:"";
           width:28px;
           height:19px;
           background:url(${require("@/assets/image/sprite_01.png")}); // 引入带有HOT图标的精灵图
           background-position:-190px 0; // HOT图标在精灵图显示的位置
           top:20px;
           right:-15px;
         }
       }
       
       &:hover a,a.active{ // 选中的item颜色变深
         color:#fff;
         background:#000;
         text-decoration:none;
       }
       
       .active .icon{   // 当前匹配的Link下显示小三角，这个active类是Link对当前pathname匹配成功时自动加上的类
         position:absolute;
         display:inline-block;
         width:12px;
         height:7px;
         bottom:-1px;
         left:50%;
         transform:translate(-50%,0);
         background-position:-226px 0 ;
       }
    }
  }
`
export const HeaderRight  = styled.div`
  display:flex;
  align-items:center;
  color:#ccc;
  font-size:12px;
  
  .search{
    width:158px;
    height:32px;
    border-radius:16px;
    &.ant-input-affix-wrapper-focused{ // 清除antd样式效果
      border-color:rgb(217,217,217);
      box-shadow:none;
    }
    &:hover{
      border-color:rgb(217,217,217);
      box-shadow:none;
    }
    input {
      &::placeholder{
        font-size:12px;
        color:#9b9b9b;
      }
      &:focus::placeholder{
        content:"";
      }
    }
  }
    
    .center{
      width:90px;
      height:32px;
      line-height:31px;
      text-align:center;
      border:1px solid #4f4f4f;
      border-radius:16px;
      margin-left:16px;
      color:#ccc;
      background-color:rgba(0,0,0,0);
      
      &:hover{
        color:#fff;
        border-color:#ccc;
      }
    }
  
    .login {
      margin-left:19px;
      margin-bottom:5px;
      height:65px;
      line-height:70px;
      padding-right:22px;
      position:relative;
        &:hover a {
          color:#999
        };
      
        &:hover .sign{
          display:block;
        }
    a{
      color:#787878;
      background-color:transparent;
      &:hover{
        text-decoration:underline;
      }
    }
      
      .sign{
        display:none;
        position:absolute;
        width:160px;
        height:2px;
        top:57px;
        right:-43px;
        background-color:#2b2b2b;
        border:1px solid #202020;
        border-radius:4px;
        box-shadow:0 8px 24px 0 rgb(0 0 0 / 50%);
          .arr{
          position:absolute;
            top:-8px;
            left:79px;
          height:8px;
          width:14px;
          background:url(${require("@/assets/image/toplist.png")});
          background-position:-20px 0;
          margin-left:-5px;
         }
      }
   }
`
